<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>用户地址列表</span>
      </div>
      <el-table :data="userTable" border style="width: 100%">
        <el-table-column type="index" label="#" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="头像" width="180" align="center">
          <template slot-scope="scope">
            <div class="img">
              <img :src="scope.row.icon" class="img" alt="" align="center" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" align="center">
        </el-table-column>
        <el-table-column prop="realname" label="真实姓名" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="电话" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间" align="center">
        </el-table-column>
      </el-table>

    </el-card>

    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import buttomBanner from "@/components/buttomBanner";
import { addressList } from "@/api/address/address.js";
export default {
  data() {
    return {
      userTable: [],
    };
  },
  components: {
    buttomBanner,
  },
  methods: {
    // 初始化数据
    init() {
      addressList().then((res) => {
          console.log(res);
        if (res.success) {
          this.userTable = res.data.rows;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #bfa;
  margin: 0 auto;
}
.el-pagination{
    text-align: center;
        margin-top: 10px;
}
</style>